<template>
  <div>
    <el-scrollbar class="right-scrollbar">
      <div class='option_area'>
      <el-form v-if="activeId===0" v-model='activeData' >
        <el-form-item prop='name'>
          问卷名称
          <el-input v-model='activeData.name' type="textarea" @blur='submitTitle' resize='none' label='问卷名称'></el-input>
        </el-form-item>
        <el-form-item prop='des'>
          问卷描述
          <el-input  v-model='activeData.des' type="textarea" @blur='submitTitle' autosize resize='none'></el-input>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
      <el-form v-else v-model='activeData'>

        <el-form-item v-if='activeData.__config__.label!==undefined' label='标题'>
          <el-input v-model='activeData.__config__.label'></el-input>
        </el-form-item>
        <el-form-item v-if='activeData.placeholder!==undefined' label='输入提示'>
          <el-input v-model='activeData.placeholder'></el-input>
        </el-form-item>
        <el-form-item v-if='activeData.__config__.required!==undefined' label='是否必须'>
          <el-switch v-model='activeData.__config__.required'></el-switch>
        </el-form-item>
        <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
          <el-switch v-model="activeData.clearable"/>
        </el-form-item>
        <el-form-item v-if="activeData.readonly !== undefined" label="是否只读">
          <el-switch v-model="activeData.readonly"/>
        </el-form-item>
        <el-form-item v-if="activeData.disabled !== undefined" label="是否禁用">
          <el-switch v-model="activeData.disabled"/>
        </el-form-item>
        <el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
          <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀"/>
        </el-form-item>
        <el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
          <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀"/>
        </el-form-item>
        <el-form-item v-if="activeData.maxlength!== undefined" label="最多输入">
          <el-input v-model="activeData.maxlength" placeholder="请输入字符长度">
            <template slot="append">
              个字符
            </template>
          </el-input>
        </el-form-item>

<!--        多选框 单选框组 选择组-->
        <template
        v-if="['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(activeData.__config__.tag)>-1">
          <el-divider>选项</el-divider>
          <draggable
            v-model='activeData.__slot__.options'
            group='optionsGroup'
            :animation="340"
          >
              <div
                class='select-item'
                v-for='(item,index) in activeData.__slot__.options'
                :key='index' >
                <div class='option-drag select-line-icon'>
                  <i class='el-icon-s-operation'></i>
                </div>
                <el-input v-model="item.label" :placeholder='item.label' size='small'></el-input>
<!--                删除按钮-->
                <div class="close-btn select-line-icon"
                     @click="activeData.__slot__.options.splice(index, 1)">
                <i class="el-icon-remove-outline"/>
              </div>
              </div>
          </draggable>

          <div>
            <el-button
              style="padding-bottom: 0"
              icon="el-icon-circle-plus-outline"
              type="text"
              @click="addSelectItem"
            >
              添加选项
            </el-button>
          </div>

        </template>
        <el-button class='submit-btn'  icon='el-icon-check' type='success' @click='dataChange(activeData)'>提交变更</el-button>
      </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { debounce } from 'throttle-debounce'
export default {

  name: 'RightPanel',
  components: { draggable },
  props: ['activeData','activeId','activeIndex'],
  watch: {
    activeData: {
      handler(newValue,oldValue) {
        if (newValue.__config__.formId === oldValue.__config__.formId) {
          if (newValue) {
            this.dataChange(newValue)
          }
        }
      },
      deep: true
    }
  },
  methods: {
    submitTitle() {
      this.$emit('modifyTitle',this.activeData)
    },
    addSelectItem() {
      this.activeData.__slot__.options.push({
        label: '选项' + new Date().getUTCMilliseconds(),
        value: this.activeData.__slot__.options.length + 1
      })
      // this.dataChange(this.activeData)
    },
    dataChange: debounce(300,false,function(item) {
      this.$emit('data-change',item)
    })
  }
}
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
  @import "/src/assets/css/scroll.css";

  .option_area{
    height: 100%;
  }
  .option-drag {
    cursor: move;
  }
  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: @theme_gray;
  }
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input + .el-input {
      margin-left: 4px;
    }
  }
  .submit-btn{
    margin: 10px 0;
  }
</style>
